<!DOCTYPE html>
<html>

<head>
    <title>话费充值</title>
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body class="body-deposit">
    <form action="" class="form">
        <div class="form-wrap">
            <div class="form-item flex" >
                <label for="phone" class="flex-1">充值号码</label>
                <input type="number" id="phone" placeholder="请输入手机号码" class="font-right">
            </div>
            <div class="form-item flex">
                <label for="phone2" class="flex-1">充值号码</label>
                <input type="number	" id="phone2" placeholder="请确认充值号码" class="font-right">
            </div>
        </div>
        <div class="form-select pd-lr-10 mt-20 mb-20">
            <ul class="flex">
                <li class="flex-1 li" data-price="10"><input type="text" value="10元" readonly><s></s></li>
                <li class="flex-1 li" data-price="20"><input type="text" value="20元" readonly><s></s></li>
                <li class="flex-1 li" data-price="30"><input type="text" value="30元" readonly><s></s></li>
            </ul>
            <ul class="flex">
                <li class="flex-1 li" data-price="50"><input type="text" value="50元" readonly><s></s></li>
                <li class="flex-1 li" data-price="100"><input type="text" value="100元" readonly><s></s></li>
                <li class="flex-1 li" data-price="200"><input type="text" value="200元" readonly><s></s></li>
            </ul>
            <ul class="flex">
                <li class="flex-1 li" data-price="300"><input type="text" value="300元" readonly><s></s></li>
                <li class="flex-1 li" data-price="500"><input type="text" value="500元" readonly><s></s></li>
                <li class="flex-1 li" data-return=“true”><input type="text" placeholder="其他金额" id="price-other"><s></s></li>
            </ul>
            <p class="text-12">实缴金额：<span id="price" class="theme-color"></span>元</p>
        </div>
        <div class="pd-lr-10 flex">
            <input type="submit" class="btn btn-large" value="充值" disabled="disabled">
        </div>
    </form>
    <script src="../../js/jquery-1.11.1.min.js"></script>
    <script>
        let params = {
            tel:'',
            tel2:'',
            price:0
        },_submit = $('input[type="submit"]');

        $('.li').on('click',function(){
            $(this).parent('ul').siblings().find('li').removeClass('active');
            $(this).siblings().removeClass('active');
            if(!($(this).hasClass('active'))) $(this).addClass('active');
            if($(this).data('return')) return;
            params.price = $(this).data('price');
            $('#price').html(params.price);
            changeSubmitStyle();
        })
        $('#phone2').on('keyup',function(){
            params.tel2 = $(this).val();
        })
        $('#phone').on('keyup',function(){
            params.tel = $(this).val();
            changeSubmitStyle();
        })
        $('#price-other').on('keyup',function(){
            params.price = $(this).val();
            $('#price').html(params.price);
            changeSubmitStyle();
        })
        function changeSubmitStyle(){
            let _disableValue = _submit.attr('disabled')
            if(params&&params.tel&&params.price&&_disableValue) _submit.removeAttr('disabled');
            if((!params.tel||!params.price)&&!_disableValue)_submit.attr('disabled','disabled');
        }
    </script>
</body>

</html>